<template>
  <MPageHeader>
    <template #extra>
      <a-space :size="10">
        <div class="color-3">
          搜索企业名称
        </div>
        <a-input placeholder="请输入搜索内容">
          <template #prefix>
            <!-- <SearchOutlined /> -->
            <svg-icon class="anticon" icon-class="search" />
          </template>
        </a-input>
        <a-button type="primary" shape="round" class="w-120" @click="addHandle">新增企业</a-button>
      </a-space>
    </template>
  </MPageHeader>
  <MPageContainer class="bg-fff p-2 radius-12">
    <div class="container">
      <!-- <div class="item">
        <div class="item-box">
          <img src="@/assets/image/1_1.png" alt="mock images"> 
        </div>
      </div> -->
      <div class="item" v-for="item in list">
        <div class="item-box">
          <a-image
            :src="item.src"
            alt="mock images"
            class="radius-12"
          />
          <div class="btn-group">
            <a-space :size="6">
              <img class="btn-icon" src="../../assets/image/del_active.png" />
              <img class="btn-icon" src="../../assets/image/edit.png" />
            </a-space>
            <div class="card-title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </MPageContainer>
</template>

<script lang="ts">
  import { Empty } from 'ant-design-vue';
  import { SearchOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'
  import Masonry from 'masonry-layout'

  const PAGINATION_INIT = {
    page: 1,
    size: 10,
    total: 900
  }
  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined,
      ArrowDownOutlined
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const { userStore } = useStore()
      const pagination = reactive({ ...PAGINATION_INIT })
      const masonry: any = ref('')
      onMounted(() => {
        document.body.setAttribute('style', '');
        new Masonry('.container', {
          itemSelector: '.item',
          columnWidth: '.container .item',
          percentPosition: true,
        });
      });
      const addHandle = () => {
        proxy.$router.push({
          path: '/company/add',
          query: {}
        })
      }

      const gotoDetail = (id) => {
        proxy.$router.push({
          path: '/company/detail',
          query: {
            id: id
          }
        })
      }

      return {
        masonry,
        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        userInfo: userStore.user || getUser(),
        pagination,
        addHandle,
        gotoDetail,
        columnWidth: 200,
        columnSpacing: 10,
        list: [
					{
						"title": "合肥城中村 - 全景摄影计划",
						"src": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
						"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-summary/share.jpg",
						"intro": "2018 年对于我来说是非常特殊的一年，一整年工作强度非常大，但依旧会抽出时间去寻找自己的诗和远方。这一年在业余生活上做了很多从未有过的尝试，也因为一些兴趣爱好结交到一帮有趣的小伙伴。",
						"title": "剧中人的2018年终总结"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
						"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
						"title": "可视化布局模块开发分享"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
						"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
						"title": "讯飞19周年庆拍摄小记"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-720yun/take-the-prize.jpg",
						"intro": "上周五，小剧脑袋一热请假去了趟北京，千里迢迢去参加了720云主办的产品发布会。按说这类发布会在家看直播更有意思，为什么小剧要劳民伤财的跑到现场去呢？",
						"title": "720云产品发布会小记"
					},
					{
						"author": "",
						"src": "http://static.bh-lay.com/blog/2018-album/yangpuwujiaochang.jpg",
						"intro": "最近闲着无聊，整理了自己觉得还算看得过去的照片，特意挑出五张印刷了二十套。假模假式的拆掉四套照片，模仿着大神的方式做了下签名。", "title": "记一次「随意」的照片赠送"
					},
					{
						"src": "http://static.bh-lay.com/blog/webpack-async-module/cover.jpg",
						"intro": "虽然项目代码经过打包压缩并且有拆分，但是页面在初始化时，这些资源都会一股脑地被加载到页面中。随着项目越来越大，滚雪球效应导致首屏加载时长的问题会越来越明显。因此适当的剥离部分模块，在需要使用的时候按需加载显得格外重要。",
						"title": "Webpack 异步模块实现"
					},
					{
						"src": "http://static.bh-lay.com/blog/see-hefei/cover-2.jpg",
						"intro": "再次见到合肥，在历经五年的沪漂之后，以一种渴望被接纳的姿态来到合肥。这篇文章作为【上海 · 再见】的下篇，原计划在2017年9月前后完成。很遗憾一直拖到了四个月后的2018年。既然已经拖了这么久，索性就当作2017年全年回顾好了。以八月为分界线，聊聊小剧这一年的经历。",
						"title": "再见 · 合肥"
					},
					{
						"author": "",
						"src": "http://static.bh-lay.com/blog/odeon-shoot/odeon-1.jpg",
						"intro": "这次拍摄也只是小剧的处女作，并没有多少经验作指导，仅仅是根据自己的思路临场做的尝试。好在团队的小伙伴比较耐心，不厌其烦地微调位置，经过反复拍摄，最终完成了此次拍摄。",
						"title": "记一次团队主题航拍"
					},
          {
						"title": "合肥城中村 - 全景摄影计划",
						"src": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
						"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-summary/share.jpg",
						"intro": "2018 年对于我来说是非常特殊的一年，一整年工作强度非常大，但依旧会抽出时间去寻找自己的诗和远方。这一年在业余生活上做了很多从未有过的尝试，也因为一些兴趣爱好结交到一帮有趣的小伙伴。",
						"title": "剧中人的2018年终总结"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
						"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
						"title": "可视化布局模块开发分享"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
						"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
						"title": "讯飞19周年庆拍摄小记"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-720yun/take-the-prize.jpg",
						"intro": "上周五，小剧脑袋一热请假去了趟北京，千里迢迢去参加了720云主办的产品发布会。按说这类发布会在家看直播更有意思，为什么小剧要劳民伤财的跑到现场去呢？",
						"title": "720云产品发布会小记"
					},
					{
						"author": "",
						"src": "http://static.bh-lay.com/blog/2018-album/yangpuwujiaochang.jpg",
						"intro": "最近闲着无聊，整理了自己觉得还算看得过去的照片，特意挑出五张印刷了二十套。假模假式的拆掉四套照片，模仿着大神的方式做了下签名。", "title": "记一次「随意」的照片赠送"
					},
					{
						"src": "http://static.bh-lay.com/blog/webpack-async-module/cover.jpg",
						"intro": "虽然项目代码经过打包压缩并且有拆分，但是页面在初始化时，这些资源都会一股脑地被加载到页面中。随着项目越来越大，滚雪球效应导致首屏加载时长的问题会越来越明显。因此适当的剥离部分模块，在需要使用的时候按需加载显得格外重要。",
						"title": "Webpack 异步模块实现"
					},
					{
						"src": "http://static.bh-lay.com/blog/see-hefei/cover-2.jpg",
						"intro": "再次见到合肥，在历经五年的沪漂之后，以一种渴望被接纳的姿态来到合肥。这篇文章作为【上海 · 再见】的下篇，原计划在2017年9月前后完成。很遗憾一直拖到了四个月后的2018年。既然已经拖了这么久，索性就当作2017年全年回顾好了。以八月为分界线，聊聊小剧这一年的经历。",
						"title": "再见 · 合肥"
					},
					{
						"author": "",
						"src": "http://static.bh-lay.com/blog/odeon-shoot/odeon-1.jpg",
						"intro": "这次拍摄也只是小剧的处女作，并没有多少经验作指导，仅仅是根据自己的思路临场做的尝试。好在团队的小伙伴比较耐心，不厌其烦地微调位置，经过反复拍摄，最终完成了此次拍摄。",
						"title": "记一次团队主题航拍"
					},
          {
						"title": "合肥城中村 - 全景摄影计划",
						"src": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
						"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-summary/share.jpg",
						"intro": "2018 年对于我来说是非常特殊的一年，一整年工作强度非常大，但依旧会抽出时间去寻找自己的诗和远方。这一年在业余生活上做了很多从未有过的尝试，也因为一些兴趣爱好结交到一帮有趣的小伙伴。",
						"title": "剧中人的2018年终总结"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
						"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
						"title": "可视化布局模块开发分享"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
						"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
						"title": "讯飞19周年庆拍摄小记"
					},
					{
						"src": "http://static.bh-lay.com/blog/2018-720yun/take-the-prize.jpg",
						"intro": "上周五，小剧脑袋一热请假去了趟北京，千里迢迢去参加了720云主办的产品发布会。按说这类发布会在家看直播更有意思，为什么小剧要劳民伤财的跑到现场去呢？",
						"title": "720云产品发布会小记"
					},
					{
						"author": "",
						"src": "http://static.bh-lay.com/blog/2018-album/yangpuwujiaochang.jpg",
						"intro": "最近闲着无聊，整理了自己觉得还算看得过去的照片，特意挑出五张印刷了二十套。假模假式的拆掉四套照片，模仿着大神的方式做了下签名。", "title": "记一次「随意」的照片赠送"
					},
					{
						"src": "http://static.bh-lay.com/blog/webpack-async-module/cover.jpg",
						"intro": "虽然项目代码经过打包压缩并且有拆分，但是页面在初始化时，这些资源都会一股脑地被加载到页面中。随着项目越来越大，滚雪球效应导致首屏加载时长的问题会越来越明显。因此适当的剥离部分模块，在需要使用的时候按需加载显得格外重要。",
						"title": "Webpack 异步模块实现"
					},
					{
						"src": "http://static.bh-lay.com/blog/see-hefei/cover-2.jpg",
						"intro": "再次见到合肥，在历经五年的沪漂之后，以一种渴望被接纳的姿态来到合肥。这篇文章作为【上海 · 再见】的下篇，原计划在2017年9月前后完成。很遗憾一直拖到了四个月后的2018年。既然已经拖了这么久，索性就当作2017年全年回顾好了。以八月为分界线，聊聊小剧这一年的经历。",
						"title": "再见 · 合肥"
					},
					{
						"author": "",
						"src": "http://static.bh-lay.com/blog/odeon-shoot/odeon-1.jpg",
						"intro": "这次拍摄也只是小剧的处女作，并没有多少经验作指导，仅仅是根据自己的思路临场做的尝试。好在团队的小伙伴比较耐心，不厌其烦地微调位置，经过反复拍摄，最终完成了此次拍摄。",
						"title": "记一次团队主题航拍"
					}
				]
      }
    },
    computed: {
      columns() {
        return [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
          {
            title: '操作',
            align: 'center',
            slots: { customRender: 'actions' }
          }
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  .container {
    margin: auto;
    .item {
      width: 14.2%;
      box-sizing:
      border-box; padding: 5px;
      img {
        width: 100%;
        display: block;
        border-radius: 12px;
      }
      &-box {
        border: 1px solid #E6EAEE;
        border-radius: 12px;
        // position: relative;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border: 1px solid #E6EAEE;
        cursor: pointer;
      }
      .btn-group {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        cursor: pointer;
        pointer-events: none;
        padding: 8px 8px 0 8px;
        box-sizing: border-box;
         border-radius: 12px;
        .btn-icon {
          position: relative;
          z-index: 999;
          width: 24px;
          height: 24px;
          cursor: pointer;
          pointer-events: visible;
        }
        .card-title {
          font-size: 12px;
          line-height: 24px;
          color: #fff;
          position: relative;
          z-index: 999;
        }
      }
      .btn-group::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
      }
      &-box:hover > .btn-group{
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: flex-end;
        align-items: flex-start;
        transition: all 0.3s;
      }
    }
  }
  .header-container {
    background: #fff;
    padding: 10px 20px 14px 20px;
    box-sizing: border-box;
  }
  .count-item {
    padding: 0 20px;
    border-right: 1px solid #e3e2e2;
  }
  .count-item:last-child {
    border-right: 0;
  }
  .ant-table-striped :deep(.table-striped) td {
    background-color: #F6F8FA;
  }
</style>
